import React from 'react';
import '../css/Home.css';
import eventEmitter from '../event';
import {
    HashRouter,
    Switch,
    Route,
    Link,
} from 'react-router-dom';

import Join from '../list/Join';
import Founder from '../list/Founder';
import Culture from '../list/Culture';
import History from '../list/History';
import News from '../list/News';
import Add from '../list/Add';
import Relation from '../list/Relation';
import Contact from '../list/Contact';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            list:["小米商城","MIUI","lOT","云服务","天星数科","有品","小爱开放平台","企业团购","资质证照","协议规则","下载app","智能生活","Select Location"],
            login:JSON.parse(localStorage.getItem("login")) || [],
            str:"",
        }
    }

    componentDidMount(){
        eventEmitter.addListener("sendMessageTooBoard",(login)=>{
            console.log(login);
            this.state.login.push(login);
            this.setState({
                login:this.state.login
            });
            localStorage.setItem("login",JSON.stringify(this.state.login));
        })
    }

    render(){
        return(
            <HashRouter>
            <div className="home">

                <div className="home-top">
                    <div className="home-top-container">
                        <div className="home-top-left">
                            {
                                this.state.list.map((element,index)=>{
                                    return <div key={index}>{element}</div>
                                })
                            }
                        </div>
                        <div className="home-top-right">
                            <div onClick={()=>{
                                this.props.history.push("/login")
                            }}>登录</div>
                            <div>注册</div>
                            <div>消息通知</div>
                            <div>购物车</div>
                        </div>
                    </div>
                </div>

                <div className="home-box">
                    <div className="home-crumb">
                        首页&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
                        关于小米&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;
                        {this.state.str}
                    </div>
                    <div className="home-box-list" onClick={()=>{
                        if (this.props.history.location.pathname == "/join") {
                            var str = "";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/founder") {
                            var str = "管理团队";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/culture") {
                            var str = "小米文化";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/history") {
                            var str = "发展经历";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/news") {
                            var str = "小米新闻";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/add") {
                            var str = "加入小米";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/relation") {
                            var str = "投资者关系";
                            this.setState({
                                str: str,
                            })
                        } else if (this.props.history.location.pathname == "/contact") {
                            var str = "联系我们";
                            this.setState({
                                str: str,
                            })
                        }
                    }}>
                        <div><Link to="/join">公司简介</Link></div>
                        <div><Link to="/founder">管理团队</Link></div>
                        <div><Link to="/culture">小米文化</Link></div>
                        <div><Link to="/history">发展经历</Link></div>
                        <div><Link to="/news">小米新闻</Link></div>
                        <div><Link to="/add">加入小米</Link></div>
                        <div><Link to="/relation">投资者关系</Link></div>
                        <div><Link to="/contact">联系我们</Link></div>
                    </div>
                    <div className="home-box-container">
                        <Switch>
                            <Route path="/founder" component={Founder} />
                            <Route path="/culture" component={Culture} />
                            <Route path="/history" component={History} />
                            <Route path="/news" component={News} />
                            <Route path="/add" component={Add} />
                            <Route path="/relation" component={Relation} />
                            <Route path="/contact" component={Contact} />
                            <Route path="/" component={Join} />
                        </Switch>
                    </div>
                </div>
            </div>
            </HashRouter>
        );
    }

    componentDidMount(){
        console.log(this)
    }
}

export default Home;